<!-- 商家端的商品详情 -->
<template>
    <view>
        <!-- <back></back> -->
        <!-- <view class="bakbtn" @click="getBp()">
            <image src="https://same.ascetic.top/static/img/backbtn.png" mode=""></image>
        </view> -->
        <view class="all">
            <view class="card">
                <view v-for="(item, index) in detail.goods" :key="index">
                    <view class="u-flex-center u-row-left u-m-b-20">
                        <image
                            :src="'https://same.ascetic.top' + item.image"
                            mode="aspectFill"
                            class="head-img"
                        ></image>
                        <view class="u-flex-center u-row-between" style="width: 100%">
                            <view class="cont">
                                <view class="name u-line-2">{{ item.title }}</view>
                                <view class="cate">规格：{{ item.difference }}</view>
                                <view class="price u-m-t-20"><text>￥</text>{{ item.price }}</view>
                            </view>
                            <view class="number">×{{ item.number }}</view>
                        </view>
                    </view>
                    <view v-if="detail.state == 6" class="u-flex u-row-right">
                        <view
                            class="button"
                            @click="
                                $func.jump(
                                    '/yCreate/pages/afterSale?id=' +
                                        id +
                                        '&item=' +
                                        JSON.stringify(item)
                                )
                            "
                            v-if="item.refund_status == 0"
                            >退款</view
                        >
                        <view class="button" v-if="item.refund_status == 1">退款中</view>
                        <view class="button button2" v-if="item.refund_status == 5">拒绝退款</view>
                        <view class="button button3" v-if="item.refund_status == 3">退款成功</view>
                    </view>
                </view>
            </view>
            <view class="card">
                <view class="top-title">订单信息</view>
                <view class="message-item u-flex u-row-between">
                    <view>订单状态</view>
                    <view class="red-status" v-if="detail.state == 1">待支付</view>
                    <view class="red-status" v-if="detail.state == 2">待发货</view>
                    <view class="red-status" v-if="detail.state == 3">待收货</view>
                    <view class="red-status" v-if="detail.state == 6">已完成</view>
                    <view class="red-status" v-if="detail.state == 4">待评价</view>
                </view>
                <view class="message-item u-flex u-row-between">
                    <view>订单号</view>
                    <text>{{ detail.order_no }}</text>
                </view>
                <view class="message-item u-flex u-row-between">
                    <view>下单时间</view>
                    <text>{{ detail.createtime_text }}</text>
                </view>
                <view
                    class="message-item u-flex u-row-between"
                    v-if="detail.state == 2 || detail.state == 3"
                >
                    <view>支付时间</view>
                    <text>{{ detail.paymenttime_text }}</text>
                </view>
                <view class="message-item u-flex u-row-between" v-if="detail.state == 3">
                    <view>发货时间</view>
                    <text>{{ detail.delivertime_text }}</text>
                </view>
                <view class="message-item u-flex u-row-between" v-if="detail.shop">
                    <view>商家名称</view>
                    <text>{{ detail.shop.shopname }}</text>
                </view>
                <view class="message-item u-flex u-row-between" v-if="detail.pay">
                    <view>商品价格</view>
                    <text>{{ detail.pay.order_price }}元</text>
                </view>
                <view class="message-item u-flex u-row-between" v-if="detail.pay">
                    <view>优惠价格</view>
                    <text>{{ detail.pay.discount_price }}元</text>
                </view>
                <view class="message-item u-flex u-row-between" v-if="detail.pay">
                    <view> 运费</view>
                    <text>{{ detail.pay.freight_price }}元</text>
                </view>
                <view class="message-item u-flex u-row-between" v-if="detail.pay">
                    <view>使用积分</view>
                    <text>{{ detail.pay.score }}元</text>
                </view>
                <view class="message-item u-flex u-row-between" v-if="detail.pay">
                    <view>抵扣金额</view>
                    <text>{{ detail.pay.score_price }}元</text>
                </view>
                <view class="message-item u-flex u-row-between" v-if="detail.pay">
                    <view>实付金额</view>
                    <text class="red-status">{{ detail.pay.actual_payment }}元</text>
                </view>
                <view class="message-item u-flex u-col-top u-row-between" v-if="detail.address">
                    <view class="u-m-r-30">收货信息</view>
                    <view>
                        <text>{{ detail.address.name }} {{ detail.address.mobile }} </text>
                        <text>{{ detail.address.address }}</text>
                    </view>
                </view>
            </view>
            <!-- <view class="card" v-if="!shop && detail.refund != ''">
                <view class="top-title">售后信息</view>
                <view class="message-item u-flex u-row-between">
                    <view>售后状态</view>
                    <text class="red-status" v-if="detail.refund.state == 0">待审核</text>
                    <text class="red-status" v-if="detail.refund.state == 1">待退货</text>
                    <text class="red-status" v-if="detail.refund.state == 2">已驳回</text>
                    <text class="red-status" v-if="detail.refund.state == 4">已退款</text>
                    <text class="red-status" v-if="detail.refund.state == 5">退款已关闭</text>
                    <text class="red-status" v-if="detail.refund.state == 6">已退回商品</text>
                    <text class="red-status" v-if="detail.refund.state == 8">退款失败</text>
                </view>
                <view class="message-item u-flex u-row-between" v-if="detail.refund.state == 1">
                    <view>退货姓名</view>
                    <text>{{ detail.refund_address.returnName }}</text>
                </view>
                <view class="message-item u-flex u-row-between" v-if="detail.refund.state == 1">
                    <view>退货手机号</view>
                    <text>{{ detail.refund_address.returnPhoneNum }}</text>
                </view>
                <view class="message-item u-flex u-row-between" v-if="detail.refund.state == 1">
                    <view>退货地址</view>
                    <text>{{ detail.refund_address.returnAddr }}</text>
                </view>
                <view class="message-item u-flex u-row-between">
                    <view>申请时间</view>
                    <text>{{ detail.refund.createtime_text }}</text>
                </view>
                <view class="message-item u-flex u-row-between">
                    <view>实付金额</view>
                    <text class="red-status">{{ detail.pay.actual_payment }}元</text>
                </view>
            </view> -->
            <view class="wulbtn" @click="show3 = true" v-if="!shop && detail.refund.state == 1">
                填写退款物流单号
            </view>
        </view>
        <!-- <view class="layer">
			<view class="wul_layer">
				<view class="wultit">
					填写物流单号
					<image src="../../static/zhibo/guanbiW.png" mode="" class="gbwul"></image>
				</view>
				<view class="flex align-center margin-40">
					<view class="text-28">快递公司:</view>
					<view class="contbox text-28">
						请选择快递公司
					</view>
				</view>
				<view class="flex align-center margin-40">
					<view class="text-28">快递单号:</view>
					<input type="text" class="contbox text-28" placeholder="请输入快递单号"/>
				</view>
				<view class="wulbtn" @click="">
					确认
				</view>
			</view>
		</view> -->
        <view style="height: 300rpx; width: 100%"></view>
        <view class="box" v-if="detail.state == 2 && shop">
            <view class="u-flex u-row-between">
                <view class="btn btn2 btn3" @click="show3 = true">立即发货</view>
            </view>
        </view>
        <!-- <view class="">
            <view class="box" v-if="detail.state == 1 || detail.state == 3">
                <view class="u-flex u-row-between">
                    <view class="btn" @click="show = true" v-if="detail.state == 3">查看物流</view>
                    <view class="btn btn2" v-if="detail.state == 3" @click="confirm">确认收货</view>
                    <view class="btn" v-if="detail.state == 1" @click="cancel">取消订单</view>
                    <view class="btn btn2" v-if="detail.state == 1" @click="pay">立即支付</view>
                    <view class="btn btn3" v-if="detail.state == 2" @click="cancels">
                        取消订单</view
                    >
                    <view class="btn btn3" v-if="detail.state ==2" @click="$func.jump('/yCreate/pages/afterSale?id='+id)">申请退款</view>
                </view>
            </view>
        </view> -->
        <u-popup
            v-model="show"
            mode="bottom"
            border-radius="25"
            height="70%"
            closeable
            safe-area-inset-bottom
        >
            <view class="coupon">
                <view class="cou_tit">物流信息</view>
                <view style="height: 100rpx"></view>
                <view class="u-p-30">
                    <view class="u-flex u-row-between">
                        <view class="name u-flex">
                            <image :src="logistics.kuaidi.logo" mode="aspectFill"></image>
                            <view
                                >{{ logistics.kuaidi.name }}
                                <text class="u-m-l-24">{{ logistics.order_no }}</text>
                            </view>
                        </view>
                        <view class="copy" @click="paste(logistics.order_no)">复制</view>
                    </view>
                    <view class="u-p-20">
                        <u-time-line>
                            <u-time-line-item v-for="item in logistics.express" :key="item.time">
                                <template v-slot:node v-if="item.status">
                                    <view class="u-node"></view>
                                </template>
                                <template v-slot:content v-if="item.status">
                                    <view>
                                        <view class="u-order-title u-flex">
                                            <text class="u-m-r-15">{{ item.status }}</text>
                                            <view class="u-order-time">{{ item.time }}</view>
                                        </view>
                                        <!-- <view class="u-order-desc">您的快递。。。。【深圳市】已揽收，揽收人：加加加（<text>1836745744</text>）</view> -->
                                        <view class="u-order-desc">{{ item.context }}</view>
                                    </view>
                                </template>
                            </u-time-line-item>
                        </u-time-line>
                    </view>
                </view>
                <view style="height: 10rpx"></view>
            </view>
        </u-popup>
        <u-popup v-model="show3" mode="center" border-radius="20">
            <view class="card2">
                <view class="pop-tit">物流信息</view>
                <view
                    class="item u-border-bottom u-flex-center u-row-between"
                    @click="show4 = true"
                >
                    <text>快递公司</text>
                    <text class="right" v-if="!corporation">{{ "请选择" }}</text>
                    <text class="right right2" v-else>{{ corporation }}</text>
                </view>
                <view class="item u-border-bottom u-flex-center u-row-between">
                    <text>快递单号</text>
                    <input
                        type="text"
                        placeholder="请输入快递单号"
                        placeholder-class="ipt-sty"
                        v-model="orderNum"
                    />
                </view>
                <view class="flex pop-button u-row-between">
                    <view class="u-flex-center" @click="show3 = false">取消</view>
                    <view class="u-flex-center b2" @click="getFahuo()">确定</view>
                </view>
            </view>
        </u-popup>
        <u-select
            v-model="show4"
            :list="list3"
            label-name="name"
            value-name="code"
            @confirm="confirm1($event, 3)"
            confirm-color="#606DCE"
        ></u-select>
    </view>
</template>

<script>
//#ifdef  H5
var wx = require("jweixin-module");
//#endif
import back from "@/components/back.vue";
export default {
    components: {
        back,
    },
    data() {
        return {
            show: false,
            id: "",
            detail: {},
            logistics: {},
            show3: false,
            show4: false,
            list3: [],
            corporation: "",
            orderNum: "",
            shop: "",
            kdlist: [],
            state: 0,
        };
    },
    onLoad(options) {
        console.log(options, "111111111111111111111111");
        this.id = options.id;
        this.state = options.state;
        this.$u.post("api/shop/get_order_kuaidi").then((res) => {
            this.list3 = res.data;
        });
    },
    onShow() {
        if (this.id) {
            this.getDetail();
        }
    },
    methods: {
        confirm() {
            this.$request
                .post("api/wanlshop.order/confirmOrder", {
                    id: this.id,
                })
                .then((res) => {
                    if (res.code == 1) {
                        this.getDetail();
                    } else {
                        this.$u.toast(res.msg);
                    }
                });
        },
        //确认发货
        getFahuo() {
            if (this.detail.refund) {
                this.$request
                    .post("api/wanlshop.refund/toExpress", {
                        id: this.detail.refund.id,
                        express_name: this.corporation,
                        express_no: this.orderNum,
                    })
                    .then((res) => {
                        if (res.code == 1) {
                            this.getDetail();
                            this.show3 = false;
                        } else {
                            this.$u.toast(res.msg);
                        }
                    });
            } else {
                this.$request
                    .post("api/wanlshop.merchant/shop_order_fh", {
                        order_id: this.id,
                        express_name: this.corporation,
                        express_no: this.orderNum,
                    })
                    .then((res) => {
                        if (res.code == 1) {
                            this.getDetail();
                            this.show3 = false;
                        } else {
                            this.$u.toast(res.msg);
                        }
                    });
            }
        },
        async pay() {
            // 确认订单
            // confirm() {
            this.$request
                .post("api/wanlshop.order/getOrderGoodsList", {
                    data: [
                        {
                            goods_id: this.goodsId ? this.goodsId : this.dataObj.goods_id,
                            sku_id: this.dataObj.sku_id,
                            number: this.dataObj.num,
                        },
                    ],
                })
                .then((res) => {
                    this.orderData = res.data;
                    console.log(res, "确认订单");
                    uni.showToast({
                        title: res.msg,
                        icon: "none",
                    });
                });
            // 提交订单
            // async submit() {
            let order = {
                address_id: this.address.id,
                lists: [
                    {
                        products: [
                            {
                                freight_id: this.list[0].freight_id,
                                goods_id: this.list[0].id,
                                number: this.dataObj.num,
                                sku_id: this.dataObj.sku_id
                                    ? this.dataObj.sku_id
                                    : this.sumbit.sku_id,
                            },
                        ],
                        shop_id: this.orderData.orderData.lists[0].shop_id,
                        coupon_id: this.selCoupon.id ? this.selCoupon.id : 0,
                    },
                ],
            };
            await uni.request({
                url: BaseUrl + "/api/wanlshop.order/addOrder",
                method: "POST",
                header: {
                    token: uni.getStorageSync("token"),
                },
                data: {
                    order: order,
                    token: this.orderData.token,
                },
                success: (res) => {
                    console.log(res, "提交订单数据");
                    if (res.data.code == 1) {
                        uni.setStorageSync("orderPay", res.data.data);
                        uni.navigateTo({
                            url: "/pages/page/paysuccess",
                        });
                    }
                },
            });
            // }
            // let that = this;
            // let method = "";
            // //#ifdef  H5
            // method = "mp";
            // //#endif
            // this.$request
            //     .post("api/wanlshop.pay/payment", {
            //         code: null,
            //         method: method,
            //         order_id: this.id,
            //         order_type: "goods",
            //         type: "wechat",
            //     })
            //     .then((res) => {
            //         this.$u.toast(res.msg);
            //         if (res.code == 1) {
            //             wx.config({
            //                 debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            //                 appId: res.data.appId, // 必填，公众号的唯一标识
            //                 timestamp: res.data.timeStamp, // 必填，生成签名的时间戳
            //                 nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
            //                 signature: res.data.paySign, // 必填，签名
            //                 jsApiList: ["chooseWXPay"], // 必填，需要使用的JS接口列表
            //             });
            //             wx.ready(function () {
            //                 wx.chooseWXPay({
            //                     timestamp: res.data.timeStamp, // 时间戳
            //                     nonceStr: res.data.nonceStr, // 随机数
            //                     package: res.data.package, //
            //                     signType: res.data.signType,
            //                     paySign: res.data.paySign, // 签名
            //                     success: function () {
            //                         uni.showToast({
            //                             title: "支付成功",
            //                         });
            //                         that.getDetail();
            //                     },
            //                     cancel: function () {
            //                         uni.showToast({
            //                             title: "取消支付",
            //                             icon: "none",
            //                         });
            //                         that.getDetail();
            //                     },
            //                     fail: function () {
            //                         uni.showToast({
            //                             title: "支付失败",
            //                             icon: "none",
            //                         });
            //                         that.getDetail();
            //                     },
            //                 });
            //             });
            //         }
            //     });
        },
        cancel() {
            uni.showModal({
                title: "提示",
                content: "是否确认取消订单?",
                success: (res) => {
                    if (res.confirm) {
                        this.$request
                            .post("api/wanlshop.order/cancelOrder", {
                                id: this.id,
                            })
                            .then((res) => {
                                if (res.code == 1) {
                                    this.getDetail();
                                } else {
                                    uni.showToast({
                                        title: res.msg,
                                        icon: "none",
                                    });
                                }
                            });
                    }
                },
            });
        },
        cancels() {
            uni.showModal({
                title: "提示",
                content: "是否确认取消订单?",
                success: (res) => {
                    if (res.confirm) {
                        this.$request
                            .post("api/wanlshop.order/cancelOrder", {
                                id: this.id,
                            })
                            .then((res) => {
                                if (res.code == 1) {
                                    this.getDetail();
                                } else {
                                    uni.showToast({
                                        title: res.msg,
                                        icon: "none",
                                    });
                                }
                            });
                    }
                },
            });
        },
        paste(value) {
            uni.setClipboardData({
                data: value,
            });
        },
        getDetail() {
            this.$request
                .get("api/wanlshop.merchant/getOrderInfo", {
                    id: this.id,
                })
                .then((res) => {
                    console.log(res, "--------------------");
                    if (res.code == 0) {
                        uni.navigateTo({
                            url: "/yCreate/pages/orderManagement",
                        });
                    }
                    this.detail = res.data;
                    console.log(this.detail);
                    this.shop = this.detail.shop ? this.detail.shop : "";
                });
            this.$request
                .post("api/wanlshop.merchant/getOrderInfo", {
                    id: this.id,
                })
                .then((res) => {
                    if (res.code == 0) {
                        uni.navigateTo({
                            url: "/yCreate/pages/orderManagement",
                        });
                    }
                    console.log(res, "====================---------");
                    this.logistics = res.data;
                });
        },
        getBp() {
            uni.navigateBack({
                delta: 1,
            });
        },
        confirm1(e, type) {
            if (type == 1) {
                this.current = e[0].value - 1;
                this.mescroll.resetUpScroll();
            } else if (type == 2) {
                this.take = e[0].value;
                this.mescroll.resetUpScroll();
            } else {
                this.code = e[0].value;
                this.corporation = e[0].label;
            }
        },
    },
};
</script>

<style lang="scss">
@import url(@/components/common.css);

.all {
    padding: 0rpx 24rpx 0;

    .card {
        width: 100%;
        margin-top: 18rpx;
        padding: 20rpx;
        background: #ffffff;
        border-radius: 10rpx;

        .head-img {
            width: 160rpx;
            height: 160rpx;
            border-radius: 10rpx;
            margin-right: 20rpx;
            flex-shrink: 0;
        }

        .cont {
            width: 100%;

            .name {
                margin-bottom: 12rpx;
                font-size: 28rpx;
            }

            .cate {
                width: fit-content;
                width: -webkit-fit-content;
                width: -moz-fit-content;
                padding: 3rpx;
                background: #fafafa;
                font-size: 22rpx;
                border-radius: 5rpx;
            }

            .price {
                font-size: 40rpx !important;
                font-weight: 550;
                color: #ef5205;

                text {
                    font-weight: 500;
                    font-size: 20rpx;
                }
            }
        }

        .number {
            width: 120rpx;
            text-align: right;
            font-size: 24rpx;
            color: #b0b0b0;
        }

        .button {
            width: fit-content;
            width: -webkit-fit-content;
            padding: 10rpx 14rpx;
            border: 1rpx solid #939393;
            font-size: 26rpx;
            border-radius: 5rpx;
        }

        .button2 {
            border: 1rpx solid #f43000;
            color: #f43000;
        }

        .button3 {
            border: 1rpx solid #606dce;
            color: #606dce;
        }

        .top-title {
            font-size: 32rpx;
            color: #333333;
        }

        .message-item {
            margin-top: 20rpx;
            font-size: 28rpx;
            color: #bebebe;

            view {
                flex-shrink: 0;
            }

            text {
                text-align: right;
                display: block;
                font-size: 28rpx;
                color: #333333;
            }

            .red-status {
                color: #f43000;
            }
        }
    }
}

.box {
    position: fixed;
    bottom: 0;
    padding: 20rpx 40rpx;
    width: 100%;
    background: #ffffff;

    padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(24rpx + env(safe-area-inset-bottom));

    .btn {
        width: 316rpx;
        height: 92rpx;
        line-height: 92rpx;
        text-align: center;
        border-radius: 10rpx 10rpx 10rpx 10rpx;
        border: 2rpx solid #bebebe;
        font-size: 28rpx;
        color: #bebebe;
    }

    .btn2 {
        color: #ffffff;
        background: linear-gradient(90deg, #606dce 0%, #606dce 100%);
    }

    .btn3 {
        width: 100%;
    }
}

/deep/.u-icon__icon {
    color: #fff !important;
}

.coupon {
    height: 100%;

    .cou_tit {
        padding: 30rpx 0;
        text-align: center;
        font-size: 32rpx;
        color: #ffffff;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 3;
        background-color: #606dce;
    }

    .name {
        font-size: 28rpx;
        color: #333333;

        image {
            margin-right: 8rpx;
            width: 44rpx;
            height: 44rpx;
            border-radius: 254rpx;
        }
    }

    .copy {
        font-size: 28rpx;
        color: #333333;
    }

    .cou_item {
        margin-bottom: 40rpx;
        position: relative;
        width: 100%;
        height: 210rpx;
        overflow: hidden;
        border-radius: 30rpx;

        .cou_grey {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 2;
            background: rgba(76, 76, 76, 0.5);
        }

        .left {
            width: 471rpx;
            height: 210rpx;
            background: #fff;
            padding: 27rpx 40rpx 0rpx 30rpx;

            .code {
                font-size: 22rpx;
                color: #666666;
            }

            .cou_price {
                margin-right: 25rpx;
                color: #e55d23;
                font-size: 88rpx;
                font-weight: 550;

                text {
                    margin-top: 32rpx;
                    font-size: 26rpx;
                    margin-right: 10rpx;
                }
            }

            .title {
                font-size: 26rpx;
                font-weight: bold;
                color: #333333;
            }

            .tips {
                margin-top: 10rpx;
                width: 154rpx;
                height: 31rpx;
                background: #e55d23;
                font-size: 20rpx;
                color: #ffffff;
            }

            .time {
                height: 20rpx;
                font-size: 22rpx;
                color: #666666;
                margin-top: 35rpx;
            }
        }

        .status {
            width: 220rpx;
            height: 210rpx;
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            font-size: 30rpx;
            font-weight: bold;
            color: #fff;
            background: #606dce;
        }
    }
}

.u-node {
    width: 22rpx;
    height: 22rpx;
    border-radius: 100rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #d0d0d0;
}

.u-order-title {
    color: #707070;
    font-weight: bold;
    font-size: 32rpx;
}

.u-order-desc {
    color: rgb(150, 150, 150);
    font-size: 28rpx;
    margin-bottom: 6rpx;

    text {
        color: #f43000;
    }
}

.u-order-time {
    color: rgb(200, 200, 200);
    font-size: 26rpx;
    font-weight: 500;
}

.card2 {
    width: 600rpx;
    padding: 0 40rpx;
    margin-bottom: 20rpx;

    .pop-tit {
        color: #606dce;
        text-align: center;
        margin-top: 30rpx;
        font-size: 35rpx;
        font-weight: 550;
    }

    .item {
        padding: 40rpx 0;
        font-size: 30rpx;

        input {
            font-size: 30rpx;
            text-align: right;
        }

        .ipt-sty,
        .right {
            font-size: 30rpx;
            color: #b0b0b0;
        }

        .right2 {
            color: #333;
        }
    }

    .pop-button {
        margin-top: 40rpx;

        view {
            width: 48%;
            height: 80rpx;
            border-radius: 40rpx;
            border: 1rpx solid #888;
            color: #888;
        }

        .b2 {
            background-color: #606dce;
            border: none;
            color: #fff;
        }
    }
}

.bakbtn {
    width: 65rpx;
    height: 65rpx;
    position: fixed;
    top: 80rpx;
    left: 30rpx;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.bakbtn image {
    width: 40rpx;
    height: 40rpx;
}

.wulbtn {
    width: 630rpx;
    height: 80rpx;
    background: linear-gradient(135deg, #2bb984 0%, #8cd994 100%);
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    border: 1rpx solid rgba(0, 0, 0, 0);
    font-size: 28rpx;
    color: #ffffff;
    line-height: 0rpx;
    text-align: center;
    line-height: 80rpx;
    margin: 30rpx auto;
}

.layer {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    display: flex;
    align-items: flex-end;
}

.wul_layer {
    width: 100%;
    background: #fff;
    border-radius: 20rpx 20rpx 0 0;
    padding: 0 0 50rpx 0;
}

.wultit {
    padding: 50rpx 0;
    text-align: center;
    font-size: 30rpx;
    color: #fff;
    background: #606dce;
    border-radius: 20rpx 20rpx 0 0;
    position: relative;
}

.gbwul {
    width: 30rpx;
    height: 30rpx;
    position: absolute;
    right: 30rpx;
    top: 50rpx;
}

.contbox {
    flex: 1;
    border: 1rpx solid #ededed;
    padding: 20rpx;
    margin-left: 30rpx;
}
</style>
